<!-- 右信息单元组件 -->
<template>
    <div class="selfHeadUnit">
        <el-avatar shape="square" size="medium" :src="avatarPath" />
    </div>
    <div class="DescribeUnit">
        <!-- <el-text type="info">{{ username }}</el-text> -->
    </div>
    <div class="textUnit">
        <div class="selfTextShow">
            {{ unit.message }}
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    userData: {
        type: Object,
        required: true
    },
    unit: {
        type: Object,
        required: true
    }
});

const avatarPath = computed(() => props.userData.user.avatarPath);
const username = computed(() => props.userData.user.username);
</script>

<style scoped>
.DescribeUnit {
    grid-area: 2 / 12 / 4 / 15;
}

/* 右信息单元,显示本用户发送的数据 */
.selfHeadUnit {
    /* 网格布局的划分方法 */
    grid-area: 1 / 13 / 10 / 15;
    padding: 15px;
}

/* 文本单元 */
.textUnit {
    grid-area: 5 / 3 / 15 / 13;
    padding: 15px;
    overflow-wrap: break-word;
}

.selfTextShow:hover {
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5))
}

/* 本机发送文本显示 */
.selfTextShow {
    float: right;
    background: #88d861;
    color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    max-width: 300px;
}
</style>